<template>
  <div>
    <headNav title="错题详情"></headNav>
    <div class="topDivCss">
      <div style="width: 4rem; height: 0.5rem; overflow:hidden; " >
        <span>知识点：{{reflectText}}</span>
      </div>
      <span style="color: #999999; "   >
        <button type="default" class="buttonCss-3" @click="signOutClick" >退出</button>
        <button type="default" class="buttonCss-3" @click="summaryMaskData = true" >选题▾</button>
      </span>
    </div>
    <div class="summaryMaskCss" v-if="summaryMaskData" ></div>
    <div class="whiteDivCss" v-if="summaryMaskData" >
      <div v-for="(val, index) in allResultData" :key="index"
      class="subjectTextCss" :class="{wrongTopicCss: val.isRight == false }"
      @click="choiceClick(val)">
        {{index + 1}}
      </div>
    </div>
    <button type="default" v-if="summaryMaskData" @click="summaryMaskData = false" class="summaryMaskButtonCss" >关闭</button>
    <div class="inDivCss" >
      <span class="titleDivCss" >
        <div>
          <span style="color: orange; margin-right: .2rem; " v-if="currentData.questionType == 1" >(单选题)</span>
          <span style="color: orange; margin-right: .2rem; " v-if="currentData.questionType == 2" >(多选题)</span>
          <span style="color: orange; margin-right: .2rem; " v-if="currentData.questionType == 3" >(判断题)</span>
        </div>
        <div>
          <span v-html="htmlDecode(currentData.questionContent)" ></span>
        </div>
      </span>
      <checklist disabled :options="currentData.questionType == 3 ? commonListJudge : commonList" v-model="radioValue"  ></checklist>
      <div class="buttonDivCss" v-if="!rightKeyData" >

      </div>
      <template v-if="rightKeyData" >
      <div class="answerResultsCss" >
        <span v-if="isItCorrect" >恭喜您，答对啦</span>
        <span v-if="!isItCorrect" style="color: #ff3000; " >答错了，再接再厉</span>
      </div>
      <div class="titleAnswerCss" >
        <div class="answerCss" style="border-right: 1px solid #c9c9c9; " >
          <span>正确答案</span>
          <span style="color: #06ca8c" v-for="(val, index) in currentData.rightOptions" :key="index" >{{optionFiltering(val)}}</span>
        </div>
        <div class="answerCss" >
          <span>我的答案</span>
          <span style="color: #ff3000" v-for="(val, index) in currentData.answerOptions" :key="index" >{{optionFiltering(val)}}</span>
        </div>
      </div>
      <div class="analysisDivCss" >
        <button type="default" class="buttonAnalysisCss" @click="viewResolutionClick" >查看解析 ∨</button>
      </div>
      <span v-if="analysisHide == true" class="spanCss" style="font-size: 0.28rem;" v-html="htmlDecode(currentData.questionAnalysis)" ></span>
      <span v-if="analysisHide == true" class="spanCss" style="font-size: 0.28rem;" v-html="htmlDecode(currentData.questionAnalysisT)" ></span>
      </template>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { Checklist  } from 'vux'
export default {
  components: {
    headNav,
    Checklist
  },
  data () {
    return {
      allStrip: 10, // 总条数
      currentPage: 1, // 当前页
      currentData: '',  // 当前展示数据
      summaryMaskData: false, // 答题总结遮罩的隐藏和消失
      rightKeyData: true,  // 答题完成后的隐藏和消失
      analysisHide: true,  // 控制错题解析消失出现
      isItCorrect: false,  // 判断答题是否正确
      radioValue: [],
      commonList: [
        {key:4, value:'A'},
        {key:8, value:'B'},
        {key:16, value:'C'},
        {key:32, value:'D'}
      ],
      commonListJudge: [
        {key:1, value:'正确'},
        {key:2, value:'错误'}
      ],
    }
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      keyPointsData: state => state.wrongTopic.keyPointsData,
      singleData: state => state.wrongTopic.singleData,
      allResultData: state => state.wrongTopic.allResultData,
      reflectText: state => state.wrongTopic.reflectText,
      whereabouts: state => state.wrongTopic.whereabouts
    })
  },
  mounted() {
    console.log(this.singleData)
    this.switchSeal(this.singleData)
  },
  methods: {
    ...mapActions({
       singleApi: 'wrongTopic/singleApi'
     }),
     ...mapMutations({
       controlSingleData: 'wrongTopic/controlSingleData'
     }),
    // 查看解析按钮事件
    viewResolutionClick () {
      this.analysisHide == true ? this.analysisHide = false : this.analysisHide = true
      if (this.currentData.questionAnalysis == null && this.currentData.questionAnalysisT == null) {
        this.$vux.toast.text('该题暂无题目解析', 'middle')
      }
    },
    // 点击单题时触发事件
    choiceClick (e) {
      this.switchSeal(e)
      this.summaryMaskData = false
    },
    // 点击退出触发事件
    signOutClick () {
      if (this.whereabouts == '/wrongTopic/questionDetails') {
         this.$router.push('/wrongTopic/wrongTopic')
      } else {
        this.$router.push(this.whereabouts)
      }
    },
    // 切换总结请求封装
    switchSeal (e) {
      this.controlSingleData(e)
      let params = {
        id: e.id,
        data: {
          QuestionId: e.questionId
        }
      }
      this.singleApi(params).then(res => {
        this.currentData = res
        this.isItCorrect = res.isRight
        this.radioValue = []
        for (let i = 0; i < this.currentData.rightOptions.length; i++) {
          this.radioValue.push(this.currentData.rightOptions[i])
        }
      })
    },
    // 题目选项过滤
    optionFiltering (e) {
      switch(e){
        case 1: return "正确"; break;
        case 2: return "错误"; break;
        case 4: return "A"; break;
        case 8: return "B"; break;
        case 16: return "C"; break;
        case 32: return "D"; break;
        case 64: return "E"; break;
        case 128: return "F"; break;
        case 256: return "G"; break;
        case 512: return "H"; break;
        case 1025: return "I"; break;
        case 2048: return "J"; break;
        case 4096: return "K"; break;
        case 8192: return "L"; break;
        case 16384: return "M"; break;
        case 32768: return "N"; break;
        case '正确': return 1; break;
        case '错误': return 2; break;
        case "A": return 4; break;
        case "B": return 8; break;
        case "C": return 16; break;
        case "D": return 32; break;
        case "E": return 64; break;
        case "F": return 128; break;
        case "G": return 256; break;
        case "H": return 512; break;
        case "I": return 1025; break;
        case "J": return 2048; break;
        case "K": return 4096; break;
        case "L": return 8192; break;
        case "M": return 16384; break;
        case "N": return 32768; break;
      }
    }
  }
}
</script>

<style scoped lang="less">
// 左右靠边，上下居中
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
// 左右居中，排序从上到下
.flexIn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// 左右居中，上下居中
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.topDivCss {
  width: 6.8rem;
  height: 0.88rem;
  background: #FFF;
  padding: 0 .2rem;
  font-size: 0.32rem;
  .flex;
}

.inDivCss {
  background: #FFF;
  margin-top: 0.3rem;
  padding: .3rem .2rem;
  font-size: 0.32rem;
  display: flex;
  flex-direction: column;
}

.titleDivCss {
  margin-bottom: .3rem;
  font-size: 0.32rem;
}

.titleAnswerCss {
  width: 6.72rem;
  height: 1.14rem;
  margin: 0.2rem 0 .3rem .05rem;
  border-radius: 0.08rem;
  background: #FFF;
  border: .6px solid #c9c9c9;
  display: flex;
}

.answerCss {
  width: 49.4%;
  height: 100%;
  color: #666666;
  font-size: 0.28rem;
  .flexIn;
}

.buttonDivCss {
  width: 7.2rem;
  height: 1.4rem;
  .flexCenter;
}

.buttonCss {
  width: 2.92rem;
  height: 0.72rem;
  font-size: 0.32rem;
  border: 0;
  background: #128fef;
  color: #FFF;
  border-radius: 0.5rem;
}

.buttonCss-2 {
  margin-right: .2rem;
  background: #FFF;
  color: #128fef;
  border: 1px solid #128FEF;
}

.buttonCss-3 {
  width: 1.3rem;
  height: .5rem;
  background: #FFF;
  color: #0085DE;
  border: 1px #0085DE solid;
  border-radius: 15px;
  font-size: 0.24rem;
}

.bottomDivCss {
  width: 6.6rem;
  height: .8rem;
  background: #128fef;
  color: #FFF;
  font-size: 0.32rem;
  margin-top: 0.3rem;
  padding: 0 .3rem;
  .flexCenter;
}

.bottomImg {
  width: 0.36rem;
  height: 0.36rem;
  margin-right: .1rem;
}

.bottomDivCss-2 {
  color: #666666;
  font-size: 0.28rem;
  display: flex;
}

.analysisDivCss {
  width: 6.8rem;
  height: .7rem;
  font-size: 0.28rem;
  color: #999999;
  margin-bottom: 0.2rem;
  .flex;
}

.buttonAnalysisCss {
  width: 2.79rem;
  height: 0.58rem;
  font-size: 0.28rem;
  border-radius: 0.3rem;
  background: #e3f2fd;
  color: #128fef;
  border: 0;
}

.answerResultsCss {
  margin-top: 0.3rem;
  font-size: 0.32rem;
  color: #06ca8c;
  .flexCenter;
}

.subjectTextCss {
  border-radius: 0.8rem;
  width: .8rem;
  height: .8rem;
  text-align: center;
  line-height: .8rem;
  font-size: 0.32rem;
  color: #FFF;
  background: #04cb8a;
  margin: .1rem .2rem;
}

.whiteDivCss {
  width: 6.2rem;
  margin-left: 0.2rem;
  border-radius: .2rem;
  background: #FFF;
  position: absolute;
  z-index: 101;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 0.2rem 0.3rem;
  overflow-y:scroll;
}

.summaryMaskCss {
  width: 100%;
  height: 100%;
  background: #7d7d7d;
  z-index: 100;
  opacity:0.8;
  position: absolute;
  right: 0;
  top: .8rem;
}

.summaryMaskButtonCss {
  width: 2.5rem;
  height: 0.8rem;
  background: #138ef2;
  color: #FFF;
  font-size: 0.32rem;
  position: absolute;
  left: 2.4rem;
  top: 5.5rem;
  z-index: 101;
  border: 0;
  border-radius: 2rem;
}

.wrongTopicCss {
  background: #ff4c23;
}
</style>
<style>
.spanCss * {
  padding: 0 0.2rem;
  width: 100%;
}
</style>
